<template>
  <div class="page page-social-list has-headbar">
    <van-nav-bar
      fixed
      :z-index="100"
      :left-text="$route.meta.title"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight">
        <div class="right-icon icon-plus" slot="right"></div>
    </van-nav-bar>
    <van-pull-refresh class="pullrefresh-box" v-model="refreshLoading" @refresh="onRefresh">
    <section class="list">
      <template v-for="(item,index) in list">
        <div class="item-box" :key="item.topics.topicID">
          <router-link :to="{name: 'social-detail', params: {id: item.topics.topicID}}" tag="div"  >
            <list-item :item-data="item"></list-item>
          </router-link>
          <div class="infomation-box">
            <div :class="{visibility:!item.topics.position}"  class="location">
              <span class="icon icon-location"></span>
              <span class="info-content">{{item.topics.position}}</span>
            </div>
            <div class="com-like">
              <router-link tag="div" class="comment" :to="{name: 'social-detail', params: {id: item.topics.topicID}}">
                <span class="icon icon-comment"></span> <span class="info-content">{{item.topics.commentNumber}}</span>
              </router-link>
              <div class="like" @click="likeEvent(item.topics.topicID,index)">
                <span class="icon icon-like" :class="{active: item.isLike}"></span> <span class="info-content">{{item.topics.likeNumber}}</span>
              </div>
            </div>
          </div>
        </div>
      </template>
      <empty-data v-if="!list.length"></empty-data>
    </section>
    </van-pull-refresh>
  </div>
</template>

<script>
import ListItem from './components/ListItem'
import { API_GET_NEW_TOPICS, API_ADD_THUMBS_UP } from '@/service/social'
import { certificateMixin } from '@/components/mixins'
export default {
  mixins: [ certificateMixin ],
  components: { ListItem },
  data () {
    return {
      list: [],
      refreshLoading: false, // 下拉刷新loading状态
      moreLoading: false,
      moreFinished: false,
      pageNumber: 0,
      pageSize: 3
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    onClickLeft () {
      this.$router.push({ name: 'home' })
    },
    onClickRight () {
      this.$router.push({ name: 'social-publish' })
    },
    likeEvent (ID, index) {
      this.certificateCheck().then(() => {
        let reqData = {
          userId: this.$store.getters.getUserInfo.userId,
          contentId: ID,
          type: 1
        }
        API_ADD_THUMBS_UP(reqData).then(resData => {
          this.list[index].isLike = true
          this.list[index].topics.likeNumber++
        })
      })
    },
    getList (callback) {
      let reqData = {
        time: 0,
        pageNumber: this.pageNumber + 1,
        pageSize: this.pageSize
      }
      return API_GET_NEW_TOPICS(reqData).then(resData => {
        this.list = resData.pageInfo.resultList
        this.pageNumber = this.pageNumber + 1
        callback && callback()
      })
    },
    onRefresh () {
      this.pageNumber = 0
      this.refreshLoading = true
      this.getList(resData => {
        this.list = resData.pageInfo.resultList
        this.refreshLoading = false
      }).catch(() => {
        this.refreshLoading = false
      })
    }
  }
}
</script>

<style lang="less">
.page-social-list {
  height: 100%;
  box-sizing: border-box;
  .pullrefresh-box{
    // height: 100%;
  }
  .van-pull-refresh__track {
    min-height: 100%;
  }
  @imagePath: '../../assets/images/social';
  .icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    vertical-align: top;
    &-location {
      width: 20px;
      height: 20px;
      background-image: url("@{imagePath}/icon_location.png");
      background-size: 10px 13px;
    }
    &-comment {
      width: 40/2px;
      height: 40/2px;
      background-image: url("@{imagePath}/icon_comment.png");
    }
    &-like {
      width: 20px;
      height: 20px;
      background-image: url("@{imagePath}/icon_like.png");
    }
    &-like.active{
      width: 20px;
      height: 20px;
      background-image: url("@{imagePath}/icon_like_active.png");
    }
  }
  .right-icon{
    display: inline-block;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-position: center center;
  }
  .icon-plus{
    background-image: url("@{imagePath}/icon_plus.png");
    background-size: 32/2px 32/2px;
  }
  .list {
    padding: 0 15px;
  }
  .visibility{
    visibility: hidden;
  }
  .item-box{
    border-bottom: 1px solid #E1E1E1;
    padding-top: 34/2px;
    padding-bottom: 33/2px;
    &:last-child {
      border-bottom: none;
    }
    .infomation-box{
      display: flex;
      justify-content: space-between;
    }
    .location {
      font-size: 12px;
      flex: 1;
      width: 0;
      display: flex;
      .icon-location {
        margin-right: 5px;
      }
      .info-content {
        flex: 1;
        width: 0;
        .text-overflow();
      }
    }
    .info-content{
      display: inline-block;
      line-height: 20px;
    }
    .com-like {
      display: flex;
    }
    .comment {
      margin-right: 20px;
    }
  }
}
</style>
